<script setup>
import { ref, onMounted, defineProps } from 'vue'

const props = defineProps({
  color: {
    type: String,
    default: '#ffffff',
  },
  noSafe: {
    type: Boolean,
    default: false,
  },
})

const safeAreaInsets = ref({
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
})
watch(
  () => props.color, // 监听 color
  (newColor, oldColor) => {
    // console.log('color 变化了:', { newColor, oldColor })
  },
)
onMounted(() => {
  const { safeAreaInsets: systemSafeAreaInsets } = uni.getSystemInfoSync()
  safeAreaInsets.value = systemSafeAreaInsets
})
</script>
<template>
  <view
    class="overflow-hidden fixed top-0 left-0 w-full z-10"
    :style="{ height: safeAreaInsets?.top + 'px', backgroundColor: props.color }"
  ></view>
  <view :style="{ height: safeAreaInsets?.top + 'px' }" class="w-full" v-if="!noSafe"></view>
</template>

<style scoped></style>
